<!--
 * @Author: your name
 * @Date: 2021-07-15 18:20:06
 * @LastEditTime: 2021-11-05 14:41:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\overView\selectByidname.vue
-->
<template>
  <div class="selectByidname">
    <el-card>
      <el-form :v-model="selectOptions" :inline="true">
        <el-form-item class="selectId">
          <el-select v-model="selectOptions.selectId" placeholder="请选择产品名称">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="selectName">
          <el-input v-model="selectOptions.selectName" placeholder="请输入产品ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="reset">重置</el-button>
          <el-button class="serach">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            selectOptions: {
                selectId: '',
                selectName: ''
            },
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
}
</script>

<style scoped lang="less">
.el-card {
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  padding: 0 30px;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  .el-form {
    margin-top: 20px;
    .reset {
      padding: 0;
      font-size: 12px;

      font-weight: 400;
      color: #666666;
      width: 60px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #dcdde0;
      border-radius: 5px;
      &:hover {
        background: #3579e0;
        color: #ffffff;
      }
    }
    .serach {
      padding: 0;
      font-size: 12px;

      font-weight: 400;
      color: #666666;

      width: 60px;
      height: 30px;
      background: #ffffff;

      border: 1px solid #dcdde0;
      border-radius: 5px;

      &:hover {
        background: #3579e0;
        color: #ffffff;
      }
    }
  }
  ::v-deep .el-input__inner {
    width: 150px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #f0f2f7;
    border-radius: 5px;
  }
}
</style>
